<template>
  <div class="file-simple _no-drag-area">
    <el-dialog
      v-model="dialogVisible"
      :width="`${width??350}`"
      :modal="false"
      align-center
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @closed="closedHandle"
    >
      <template #header>
        <dialog-title title="提示" />
      </template>
      <div class="content">
        <svg-icon
          v-if="success"
          :size="24"
          icon-class="download-content-success"
          style="color:#1FC880"
        />
        <svg-icon
          v-else
          :size="24"
          icon-class="info-red"
          style="color:#FD5858;"
        />
        <div class="contentWrapper">
          <div
            v-for="(item,index) in content.split('\n')"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-for="item in buttonList"
            :key="item.text"
            :type="item.type"
            style="width: 110px; border-radius: 28px"
            @click="
              () => {
                if (item.click === 'success') {
                  handleSuccessInner(item.preventClose)
                } else {
                  handleCancelInner(item.preventClose)
                }
              }
            "
          >
            {{ item.text }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps({
  handleSuccess: {
    type: Function,
    default:()=>{}
  },
  handleCancel: {
    type: Function,
    default:()=>{}
  },
  content: {
    type: String,
    default:'',
  },
  buttonList: {
    type: Array<{
      text: string,
      type: string,
      click: string,
      preventClose:boolean
    }>,
    default:[]
  },
  width: {
    type: Number,
    default:350
  },
  success: {
    type: Boolean,
    default:false,
  }
})

const dialogVisible = ref(true)
const clickType = ref('cancel')

const handleSuccessInner = (_preventClose:boolean) => {
  if(_preventClose){
    clickType.value = 'preventClose'
    props.handleSuccess('',true)
  }else{
    clickType.value = 'success'
    dialogVisible.value = false
  }
}

const handleCancelInner = (_preventClose:boolean) => {
  if(_preventClose){
    clickType.value = 'preventClose'
    props.handleCancel('',true)
  }else{
    clickType.value = 'cancel'
    dialogVisible.value = false
  }
}

const closedHandle = () => {
  if(clickType.value === 'preventClose'){
    return;
  }
  if (clickType.value === 'success') {
    props.handleSuccess()
  } else {
    props.handleCancel()
  }
}
</script>

<style scoped lang="scss">
.file-simple {
  .content {
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
    min-height: 50px;
    .contentWrapper{
      line-height: 24px;
    }
  }
  :deep(.el-dialog__footer){
    padding: 10px 0 10px;
  }
  .dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
  }
}
</style>
